<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#getPara").click(function() {
		$.post("cicada.json", {}, function(res, status, xhr) {
			console.log(res);
			console.log(status);
			console.log(xhr);
			cities(res.data);
		});
	});
});

var cities = function(cityList) {
	var string = "<h1>"+ cityList.name +"</h1>";
	for (let i = 0, len = cityList.province.length; i < len; i++) {
		string += "<details><summary>" + cityList.province[i].name + "</summary>";
		for (let j = 0, lens = cityList.province[i].cities.city.length; j < lens; j++) {
			string += "<p>" + cityList.province[i].cities.city[j] + "</p>";
		}
		string += "</details>";
	}
	$("#map").html(string);
};
</script>
</head>
<body>
<button id="getPara">获取</button>
<div id="map"></div>
</body>
</html>